<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import { PaginationProps } from "@pureadmin/table";
import { computed, onMounted, reactive, ref } from "vue";
import Big from "big.js";
import { getDataBySQLDesc } from "@/api/common";
import { useDictionary } from "@/hooks/useDictionary";
import { usePagination } from "@/hooks/usePagination";
defineOptions({
  name: "TimelinessRate"
});
// 获取请购紧急度
const { dicData } = useDictionary({
  action: "public/get_xtcs_qgjjd"
});
const pagination = usePagination();
const tableData = ref([]);
const supplierOptions = computed(() => {
  return dicData.value.map(item => ({
    label: item["代码值"], // 根据实际接口返回调整字段
    value: item["代码识别"]
  }));
});
const columns = ref([
  {
    label: "审核月份",
    prop: "审核月份"
  },
  {
    label: "检验批次",
    prop: "检验批次"
  },
  {
    label: "按时检验批次",
    prop: "按时检验批次"
  },
  {
    label: "超时检验批次",
    prop: "超时检验批次"
  },
  {
    label: "检验及时率",
    prop: "检验及时率",
    formatter: row => {
      return row["检验及时率"] + "%";
    }
  }
]);
const loading = ref(false);
const option = ref({
  tooltip: {
    trigger: "axis",
    position: function (point, params, dom, rect, size) {
      // point: 鼠标位置，格式为 [x, y]
      // params: 提示框所包含的数据信息
      // dom: 提示框的 DOM 元素
      // rect: 鼠标所在图形的包围盒，格式为 {x, y, width, height}
      // size: 提示框的大小，格式为 {contentSize: [width, height], outerSize: [width, height]}
      return [point[0] - 50, point[1] - 50]; // 设置提示框在鼠标上方 20px 处
    },
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999"
      }
    },
    // 新增 formatter 函数来自定义 tooltip 内容
    formatter: function (params) {
      // params 包含了鼠标悬停位置的数据信息
      const date = params[0].name; // 获取审核月份
      let tooltipContent = `<div style="font-weight:bold;">${date}</div>`;

      // 查找对应月份的原始数据
      const currentData = tableData.value.find(
        item => item["审核月份"] === date
      );
      if (currentData) {
        // 添加检验批次信息
        tooltipContent += `<div>检验批次: ${currentData["检验批次"]}</div>`;
        // 添加按时检验批次信息
        tooltipContent += `<div>按时检验批次: ${currentData["按时检验批次"]}</div>`;
        // 添加超时检验批次信息
        tooltipContent += `<div>超时检验批次: ${currentData["超时检验批次"]}</div>`;
        // 添加检验及时率信息（已格式化）
        tooltipContent += `<div>检验及时率: ${currentData["检验及时率"]}%</div>`;
      }

      return tooltipContent;
    }
  },
  legend: {
    type: "scroll",
    data: ["检验批次", "检验及时率"]
  },
  xAxis: [
    {
      type: "category",
      data: [],
      axisPointer: {
        type: "shadow"
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value}"
      }
    },
    {
      type: "value",
      axisLabel: {
        formatter: "{value}%"
      }
    }
  ],
  series: [
    {
      name: "检验批次",
      type: "bar",
      yAxisIndex: 0,
      data: []
    },
    {
      name: "检验及时率",
      type: "line",
      smooth: true,
      yAxisIndex: 1,
      data: []
    }
  ]
});
const form = ref({
  action: "biz/reports/get_iqc_jcjslfx",
  shshnd: "",
  qgjjd: null,
  jydjb: "",
  jydzt: ""
});
const searchColumns = computed<PlusColumn[]>(() => [
  {
    label: "年份",
    prop: "shshnd",
    valueType: "date-picker",
    fieldProps: {
      type: "year",
      valueFormat: "YYYY",
      placeholder: "请选择年份"
    }
  },

  {
    label: "请购紧急度",
    labelWidth: "120px",
    prop: "qgjjd",
    valueType: "select",
    fieldProps: {
      filterable: true,
      placeholder: "请选择请购紧急度"
    },
    options: supplierOptions.value // 初始为空，后续更新后 searchColumns 也会更新
  }
]);

// 获取年份
const getTime = async () => {
  const { data } = await getDataBySQLDesc({
    action: "public/get_server_sysdate"
  });
  form.value.shshnd = data[0].年;
  getAllParams();
  // getChartsData2();
  // getTableData()
};
const getAllParams = async () => {
  let reqParams = {
    action: "public/get_bi_sjfw",
    hsmc: "get_iqc_jcjslfx"
  };
  const { data } = await getDataBySQLDesc(reqParams);
  data.forEach(element => {
    form.value[element["参数编码"]] = element["参数值"];
  });
  getChartsData();
};
const getChartsData = async () => {
  const { data } = await getDataBySQLDesc({
    ...form.value
  });
  data.forEach(
    item =>
    (item["检验及时率"] = Big(Number(item["检验及时率"]))
      .times(100)
      .toFixed(2))
  );
  const cpmputedData = data.slice(0, -1);
  option.value.xAxis[0].data = cpmputedData.map(item => item["审核月份"]);
  option.value.series[0].data = cpmputedData.map(item => item["检验批次"]);
  option.value.series[1].data = cpmputedData.map(item => item["检验及时率"]);
  tableData.value = data;
};
const handleChange = () => { };
const handleSearch = async () => {
  getChartsData();
};
const handleRest = () => {
  form.value.qgjjd = null;
  form.value.action = "biz/reports/get_iqc_jcjslfx";
  getTime();
};
onMounted(() => {
  // getTime();
});
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" searchText="搜索" resetText="重置" expand-text="展开" retractText="收起"
        :columns="searchColumns" :show-number="2" label-width="80" label-position="right" @change="handleChange"
        @search="handleSearch" @reset="handleRest" />
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <div class="chart bar-chart">
        <EChartsComponent :extraOptions="option" type="bar" />
      </div>
    </el-card>
    <el-card class="mt-[20px]">
      <div class="operate mb-[20px]">
        <el-button type="primary">导出</el-button>
      </div>
      <PureTable ref="tableRef" border row-key="id" alignWhole="center" showOverflowTooltip :data="tableData"
        :columns="columns" :pagination="null" />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.chart {
  height: 400px;
}
</style>
